<template>
  <div>
    <p @click="addCount">count:{{ count }}</p>
    <!-- 遍历数组 -->
    <ul>
      <li v-for="item in nameArr" :key="item">
        {{ item }}
      </li>
    </ul>
    <p><button @click="addHero">添加英雄</button></p>

    <hr />
    <ul>
      <li v-for="item in girlArr" :key="item">
        {{ item }}
      </li>
    </ul>
    <p><button @click="addGirl">添加美女</button></p>
    <hr />
    <p @click="addnum">num:{{ num }}</p>
  </div>
</template>

<script setup>
//  该<script setup> 代码
// script作用域内的代码 相当于 写在 setup(){代码}
// 语法糖写法 <script setup>  不需要使用return 抛出变量个方法了.

// 总结:
// 01: ref 处理引用数据类型时, 也是借助了reactive 来处理的引用数据类型
// 02: ref 这个钩子函数既可以处理基本数据类型 也可以处理引用复杂数据类型, 将数据变成响应式数据
// 03: reactive 这个钩子函数 只能处理复杂或引用数据类型, 不能处理基本数据类型
// 04: ref 将数据变成响应式数据的原理 使用的是vue2 object.defineProperty
// 05: reactive 将数据变成响应式数据的原理 使用vue3 proxy 将数据变成响应式数据

import { ref, reactive } from "vue";
// 01: 使用ref 定义count 基本数据类型
const count = ref(0); //ref 响应式对象
// console.log("count", count);
const addCount = () => {
  count.value++;
};

// 02: 定义复杂/引用数据类型 使用ref 定义
const nameArr = ref(["关羽", "张飞", "赵云"]);
const addHero = () => {
  nameArr.value.push("马超");
};

// console.log("ref数组", nameArr);
//03: 使用reactive  创建响应式的引用数据
const girlArr = reactive(["貂蝉", "王昭君", "西施"]);
// console.log("reactive数组", girlArr);
const addGirl = () => {
  girlArr.push("杨贵妃");
};

//04: 测试使用reactive 来处理基本数据类型

let num = reactive(999);
console.log("num", num);
const addnum = () => {
  num++;
};
</script>
<style scoped>
</style>